<template>
  <div class="qusetion-form">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="demo-form"
    >
      <el-form-item label="题库名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="题库状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio label="1">正常</el-radio>
          <el-radio label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="访问权限" prop="status">
        <el-select v-model="form.permission" placeholder="请选择访问权限">
          <el-option label="完全私有" value="1"></el-option>
          <el-option label="只读共享" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题库说明">
        <el-input type="textarea" v-model="form.des"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="custom" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '', //题库名称
        status: '1', //状态，1-正常，2-禁用
        permission: '1', //状态，1-完全私有，2-只读共享，3-其它
        des: '',
      },
      rules: {
        name: [{ required: true, message: '请输入题库名称', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择试题状态', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    activeRow() {
      return this.$store.state.question.activeRow
    },
  },
  watch: {
    activeRow: {
      immediate: true,
      handler(row) {
        this.init(row)
      },
    },
  },
  methods: {
    //显示弹窗
    init(row) {
      if (row.hasOwnProperty('id')) {
        this.form = { ...this.form, ...row }
        this.$set(this.form, 'id', row.id)
      } else {
        this.form = this.$options.data().form
        this.$delete(this.form, 'id')
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let dispatchType = this.activeRow.hasOwnProperty('id')
            ? 'testQuestionBankUPDATE'
            : 'testQuestionBankADD'
          await this.$store.dispatch(dispatchType, this.form)
          this.$store.commit('SET_ACTIVENAME', 'manage')
        }
      })
    },
  },
}
</script>
<style scoped>
.qusetion-form {
  max-width: 600px;
}
</style>